<script setup>
import {ref} from 'vue'
import yemian1 from "./yemian1.vue"
import yemian2 from "./yemian2.vue"
import yemian3 from "./yemian3.vue"
import yemian4 from "./yemian4.vue"
import yemian5 from "./yemian5.vue"
let time = ref(0);

const timeStop = setInterval(() => {
  time.value = time.value + 1;
  console.log(time.value);
  if(time.value == 25){
    clearInterval(timeStop)
  }
},1000)
</script>

<template>
  <view v-if="time < 5 && time >= 0">
    <yemian1></yemian1>
  </view>
  <view v-if="time < 10 && time >= 5">
    <yemian2></yemian2>
  </view>
  <view v-if="time < 15 && time >= 10">
    <yemian3></yemian3>
  </view>
    <view v-if="time < 20 && time >= 15">
    <yemian4></yemian4>
  </view>
  <view v-if="time <= 25 && time >= 20">
    <yemian5></yemian5>
  </view>
</template>

<style scoped>
#background{
  display: flex;
  justify-content: center;
}
</style>